import React, {Component} from 'react';

class StrengthList extends Component {
    render() {
        const StrengthHeader = () => {
            return (
               <h3 className='strength-list-head'>永安旅遊——您唯一嘅網上預訂旅遊平台</h3>
            );
        };

        const strengthitems = [
            {
                title: '選擇夠多',
                content: '全球逾200個城市的機票及超過100萬間酒店'
            }, {
                title: '價格特惠',
                content: '中國酒店低價保證, 網羅17間廉航機票'
            }, {
                title: '預訂更快',
                content: '提供全天候預訂機票服務，即時確認'
            }, {
                title: '值得信賴',
                content: '專注營運旅遊服務逾半世紀，口碑載道'
            }, {
                title: '更多著數',
                content: '會員訂購賺取積分，兼享積分當錢使'
            }, {
                title: '手機預訂',
                content: 'APP預訂機票、酒店及自由行，尊享雙倍會員積分！'
            }
        ];

        const StrengthBody = props => {
            const items = props.strengthitems.map((item, index) => {
                return (
                    <div key={index} className='strength-item'>
                        <div className='image-content'><img src={item.imageSrc} /></div>
                        <div className='strength-content'>
                            <h4 className='strength-content-title'>{item.title}</h4>
                            <div className='strength-content-message'>{item.content}</div>
                        </div>
                    </div>
                    
                );
            });
            return <div className='strength-item-list'>{items}</div>;
        }

        return (
            <div className='strength-list-root'>
               <StrengthHeader />
               <StrengthBody strengthitems={this.props.strengthitems ? this.props.strengthitems : strengthitems} />
            </div>
        );
    }
}

export default StrengthList;